<template>
  <div
    style="height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center"
    class="login-bg"
  ></div>
</template>

<script lang="ts" setup>
import { useOidcStore } from '@/stores/oidc';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { ElLoading } from 'element-plus';

// 开始加载
const loading = ElLoading.service({
  lock: true,
  text: '登录跳转中...',
  background: 'rgba(0, 0, 0, 0.7)'
});

const oidc = useOidcStore();
const router = useRouter();

oidc
  .signinRedirectCallbackAsync()
  .then(() => {
    ElMessage.success('登录成功');
    router.push('/').then(() => {
      loading.close();
    });
  })
  .catch((error) => {
    // 登录错误，跳转 404
    console.log(error);
    loading.close();
    router.push('/404');
  });
</script>

<style scope>
.login-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: url(../../assets/img/login-bg.jpg) center/cover no-repeat;
}
</style>
